<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:substituteby="navtempStore::docHead(#{storecenter.name},'首页')">
</head>
<body>
<style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #weChatSearch .caption {
        text-align: center;
    }
    .jiesuan{
        text-align: left;
        font-size:16px;
    }
</style>
<nav th:replace="navtempStore::nav(#{storecenter.name})"></nav>
<div class="container">
    <div class="row" style="margin-top: 5em;">
        <div class="col-sm-12 col-md-12">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">添加会员：</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                        <a th:href="@{/demo/store/course}" class="btn btn-primary navbar-btn">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            保存
                        </a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="input-group" style="margin-bottom: .5em;">
                <span class="input-group-addon">&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;</span>
                <input name="description" class="form-control" placeholder="姓名"
                       aria-describedby="basic-username" type="text"/>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group" style="margin-bottom: .5em;">
                <span class="input-group-addon">&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话&nbsp;</span>
                <input name="description" class="form-control" placeholder="电话"
                       aria-describedby="basic-username" type="text"/>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab1" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        会员卡
                    </a>
                </li>
                <li>
                    <a href="#cika" data-toggle="tab">
                        次卡
                    </a>
                </li>
                <li>
                    <a href="#chuzhika" data-toggle="tab">
                        储值卡
                    </a>
                </li>
            </ul>
            <div id="myTabContent1" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;会员卡&nbsp;</span>
                                <select class="form-control">
                                    <option selected="selected">请选择</option>
                                    <option>月卡</option>
                                    <option>季卡</option>
                                    <option>年卡</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><h4>所选会员卡信息</h4></div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-2 col-md-offset-1"><span>会员卡类型:月卡</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>售价:800</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>有效期:1自然月</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>额外有效期:5天</span></div>
                                    </div>
                                    <br/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="cika">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;次卡&nbsp;</span>
                                <select class="form-control">
                                    <option selected="selected">请选择</option>
                                    <option>私教30次卡</option>
                                    <option>普通30次卡</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><h4>所选次卡信息</h4></div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-2 col-md-offset-1"><span>会员卡类型:私教30次卡</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>售价:3000</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>次数:30</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>额外次数:5</span></div>
                                    </div>
                                    <br/>
                                    <div class="row">
                                        <div class="col-md-2 col-md-offset-1"><span>有效期:1年</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="chuzhika">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;储值卡&nbsp;</span>
                                <select class="form-control">
                                    <option selected="selected">请选择</option>
                                    <option>10000储值卡</option>
                                    <option>20000储值卡</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><h4>所选储值卡信息</h4></div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-2 col-md-offset-1"><span>会员卡类型:10000储值卡</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>售价:10000</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>金额:10000</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>额外金额:500</span></div>
                                    </div>
                                    <br/>
                                    <div class="row">
                                        <div class="col-md-2 col-md-offset-1"><span>有效期:1年</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>常温/高温课价格:150</span></div>
                                        <div class="col-md-2 col-md-offset-1"><span>私教课价格:350</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab3" class="nav nav-tabs">
                <li class="active">
                    <a href="#membersList" data-toggle="tab">
                        结算信息
                    </a>
                </li>
            </ul>
            <div id="myTabContent3" class="tab-content">
                <div class="tab-pane fade in active" id="memberList">
                    <br/>
                    <div class="row">
                        <div class="col-md-2"><span class="jiesuan">&nbsp;已选择会员卡:</span></div>
                        <div class="col-md-10">
                            <span class="btn btn-success">私教30次卡</span>
                            &nbsp;
                            <span class="btn btn-success">10000储值卡</span>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-2"><span class="jiesuan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金额总计:</span></div>
                        <div class="col-md-10">
                            <span>￥13000</span>
                        </div>
                    </div>
                    <br/>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab2" class="nav nav-tabs">
                <li class="active">
                    <a href="#wechat" data-toggle="tab">
                        绑定微信号
                    </a>
                </li>
            </ul>
            <div id="myTabContent2" class="tab-content">
                <div class="tab-pane fade in active" id="wechat">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;微信昵称&nbsp;</span>
                                <input name="description" class="form-control" placeholder="微信昵称"
                                       aria-describedby="basic-username" type="text"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">查询</button>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 2em;" id="weChatSearch">
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">
            <div class="thumbnail">
                <img th:src="@{/images/placeholder.jpeg}" alt="微信头像" style="width: 80px;height: 80px;"/>
                <div class="caption">
                    <h4>皇上</h4>
                    <p>性别:男</p>
                    <p>地区:北京 西城</p>
                    <p>
                        <button class="btn btn-sm btn-primary chwx" role="button">选择</button>
                        &nbsp;
                        <button class="btn btn-sm btn-danger cawx" role="button">取消</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
